<template>

    <div class="mask" @click.stop.prevent v-if="isShowMask" :class="[isShowMask ? 'show': 'hide' ]"></div>


</template>
<script type="text/babel">
    export default{
        props: {
          isShowMask: {
            type: Boolean ,
            default: false
          }
        },
        data(){
            return{
             // isShowMask : false
            }
        },
        components:{

        },
        mounted(){},
        methods:{
          showMask() {
            this.isShowMask = true
          },
          closeMask() {
            this.isShowMask = false
          }
        }
    }
</script>
<style lang="less" scoped>
  @import "~@/assets/css/global.less";
  .mask {
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: @maskZindex ;
    background-color: rgba(0, 0, 0, .6);
    &.show {
      animation: maskShow 1s ease-in-out;
    }
    &.hide {
      animation: maskHide 1s ease-in-out;
    }

  }
  @keyframes maskShow {
    0% {
      position: fixed;
      left: 0;
      top: 0;
      opacity: 0;
    }
    100% {
      position: fixed;
      left: 0;
      top: 0;
      background-color: rgba(0, 0, 0, .6);
    }

  }

  @keyframes maskHide {
    0% {
      position: fixed;
      left: 0;
      top: 0;
      background-color: rgba(0, 0, 0, .6);
    }
    100% {
      position: fixed;
      left: 0;
      top: 0;
      opacity: 0;
    }
  }
</style>

